<template>
  <div class="container">
    <div class="push-container">
      <!--      <div class="header"><span class="header-icon"></span><span class="header-title">订单详情</span></div>
            <div class="img-list">
              <div style="color: white;font-size: 20px;font-weight: bold">
                {{ $utils.convert.to_text(productOrder.dealStatus, $utils.pro.orderStatus) }}
              </div>
            </div>-->
      <!--      <div style="margin-left: 20px">
              <el-divider style="width: 576px"/>
            </div>-->
      <div class="header-title" style="margin-top: 10px;margin-bottom: 15px;font-size: 18px;padding-left: 20px"> 物流信息
      </div>
      <div style="margin-left: 20px">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-order"></i>
              物流方式
            </template>
            {{ productOrder.postType === 0 ? '邮寄' : '自提' }}
          </el-descriptions-item>
          <!--          <el-descriptions-item v-if="productOrder.productPostStatus === 0">
                      <template slot="label">
                        <i class="el-icon-s-release"></i>
                        物流
                      </template>
                      {{ productOrder.shipCompany }} {{ productOrder.shipNum }}
                    </el-descriptions-item>-->
          <!--          <el-descriptions-item v-if="productOrder.productPostStatus === 1">
                      <template slot="label">
                        <i class="el-icon-s-release"></i>
                        提货码
                      </template>
                      {{ productOrder.postSelfCode }}
                    </el-descriptions-item>-->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-claim"></i>
              发货地址
            </template>
            <span>
              {{ productOrder.shipAddress }}
            </span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-claim"></i>
              收货地址
            </template>
            <span>
              {{ productOrder.receiveAddress }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-left: 20px">
        <el-divider style="width: 576px"/>
      </div>
      <div class="header-title" style="margin-top: 10px;margin-bottom: 15px;font-size: 18px;padding-left: 20px"> 订单信息
      </div>
      <div style="margin-left: 20px">
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-order"></i>
              订单编号
            </template>
            {{ productOrder.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-release"></i>
              商品标题
            </template>
            {{ productOrder.productName }}
          </el-descriptions-item>
          <!--          <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-s-claim"></i>
                        商品描述
                      </template>
                      {{ productInfo.intro }}
                    </el-descriptions-item>-->
          <!--          <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-s-claim"></i>
                        商品金额
                      </template>
                      {{ productInfo.price }} 元
                    </el-descriptions-item>-->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-claim"></i>
              支付金额
            </template>
            {{ productOrder.totalPrice }} 元
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!--      <div style="margin-left: 20px">
              <el-divider style="width: 576px"/>
            </div>-->
      <!--      <div class="header-title" style="margin-top: 10px;margin-bottom: 15px;font-size: 18px;padding-left: 20px"> 评价信息
            </div>
            <div style="margin-left: 20px">
              <div class="info">
                <div>
                  <div class="user-info">
                    <el-rate :disabled="true" v-model="productOrder.evaScore" :texts="['极差', '失望', '一般', '满意', '极好']"
                             show-text></el-rate>
                  </div>
                  <div class="interaction-content" style="margin-top: 25px">
                    <el-input :disabled="true" type="textarea" placeholder="你的评价可以帮到其他买家哦!" maxlength="150"
                              :autosize="{minRows: 5}" show-word-limit v-model="productOrder.evaContent"></el-input>
                  </div>
                </div>
              </div>
            </div>-->
      <div class="submit">
        <button class="publishBtn" type="submit" @click="back">
          <span class="btn-content">返回</span>
        </button>
        <button v-if="productOrder.status === 3 && $store.getters.getActiveTab === 'sell'"
                class="publishBtn" type="submit" @click="shipped"
                style="margin-left: 400px; background-color: #67C23A">
          <span class="btn-content">确认发货</span>
        </button>
        <button v-if="productOrder.status === 4 && $store.getters.getActiveTab === 'purchase'"
                class="publishBtn" type="submit" @click="confirmReceipt"
                style="margin-left: 400px; background-color: #67C23A">
          <span class="btn-content">确认收货</span>
        </button>
        <button v-if="productOrder.status === 2 && $store.getters.getActiveTab === 'order'"
                class="publishBtn" type="submit" @click="toPayment(productOrder.orderNo)"
                style="margin-left: 400px; background-color: #67C23A">
          <span class="btn-content">去支付</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>


import {mapState} from "vuex";

export default {
  data() {
    return {
      productOrder: {},
      // activeTab: '',
      // productInfo: {},
      // paymentOrder: {},
      // paymentPay: {},
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
    ...mapState(['activeTab'])
  },
  methods: {
    getDetail() {
      this.$api.productOrder.getProductOrderDetail(this.$route.query.orderNo).then(res => {
        console.log('订单详情：', res)
        this.productOrder = res.result
        // this.productInfo = res.result.productInfo
        // this.paymentOrder = res.result.paymentOrder
        // this.paymentPay = res.result.paymentPay
      })
    },
    back() {
      this.$router.push('/user')
    },

    //确认发货
    shipped() {
      this.$api.productOrder.shipments(this.productOrder.orderNo).then(res => {
        this.productOrder = res.result
        this.$router.push('/user')
        this.$message.success('发货成功')
      })

    },
    //确认收货
    confirmReceipt() {
      this.$api.productOrder.receipt(this.productOrder.orderNo).then(res => {
        this.productOrder = res.result
        this.$router.push('/user')
        this.$message.success('收货成功')
      })

    },

    //去支付
    toPayment(orderNo) {
      this.$router.push('/paymentPay?paymentOrderId=' + orderNo)
    }
  }
}
</script>
<style lang="less" scoped>


.container {
  flex: 1;
  padding-top: 72px;

  .push-container {
    margin-left: 12vw;
    width: 600px;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: var(--el-box-shadow-lighter);


    .header {
      padding: 15px 0;
      line-height: 16px;
      font-size: 16px;
      font-weight: 400;

      .header-icon {
        position: relative;
        top: 2px;
        display: inline-block;
        width: 6px;
        height: 19px;
        background: #3a64ff;
        border-radius: 3px;
        margin-right: 2px;
      }

      .header-title {
        line-height: 20px;
        font-size: 20px;
      }


    }

    .img-list {
      width: 576px;
      margin-left: 20px;
      padding: 0;
      height: 200px;
      background-color: #3a64ff;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .push-content {

      position: relative;

      .scroll-tag-container {
        position: absolute;
        width: 98%;
        background-color: #fff;
        z-index: 99999;
        border: 1px solid #f4f4f4;
        height: 300px;
        overflow: auto;

        .scrollbar-tag-item {
          display: flex;
          align-items: center;
          height: 30px;
          margin: 10px;
          text-align: center;
          border-radius: 4px;
          padding-left: 2px;
          color: #484848;
          font-size: 14px;
        }

        .scrollbar-tag-item:hover {
          background-color: #f8f8f8;
        }
      }

      .input-title {
        margin-bottom: 5px;
        font-size: 12px;
      }

      .input-content {
        font-size: 12px;
      }
    }

    .btns {
      padding: 0 12px 0px 20px;

      button {
        min-width: 62px;
        width: 62px;
        margin: 0 6px 0 0;
        height: 18px;
      }

      .css-fm44j {
        -webkit-font-smoothing: antialiased;
        appearance: none;
        font-family: RedNum, RedZh, RedEn, -apple-system;
        vertical-align: middle;
        text-decoration: none;
        border: 1px solid rgb(217, 217, 217);
        outline: none;
        user-select: none;
        cursor: pointer;
        display: inline-flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        margin-right: 16px;
        border-radius: 4px;
        background-color: white;
        color: rgb(38, 38, 38);
        height: 24px;
        font-size: 12px;
      }
    }

    .categorys {
      padding: 0 12px 10px 12px;
    }

    .trend-container {
      padding-left: 15px;

      .trend-item {
        display: flex;
        flex-direction: row;
        padding-top: 10px;
        max-width: 100vw;

        .main {
          flex-grow: 1;
          flex-shrink: 1;
          display: flex;
          flex-direction: row;
          padding-bottom: 12px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.08);

          .details-box {
            width: 25%;
          }

          .info {
            flex-grow: 1;
            flex-shrink: 1;
            margin-left: 10px;

            .user-info {
              display: flex;
              flex-direction: row;
              align-items: center;
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 4px;

              a {
                color: #333;
              }
            }

            .interaction-hint {
              font-size: 14px;
              color: rgba(51, 51, 51, 0.6);
              margin-bottom: 8px;
            }

            .interaction-content {
              display: flex;
              font-size: 14px;
              color: #333;
              margin-bottom: 12px;
              line-height: 140%;

              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              word-break: break-all;
              overflow: hidden;
            }

            .interaction-price {

              font-weight: bolder;
              font-size: 16px;
              color: red;
            }

            .interaction-footer {
              margin: 8px 12px 0 0;
              padding: 0 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .icon-item {
                display: flex;
                justify-content: left;
                align-items: center;
                color: rgba(51, 51, 51, 0.929);

                .count {
                  margin-left: 3px;
                }
              }
            }
          }
        }
      }
    }

    .submit {
      padding: 0 12px 10px 20px;
      margin-top: 30px;

      button {
        width: 80px;
        height: 32px;
        font-size: 14px;
      }

      .publishBtn {
        background-color: #ff2442;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }

      .clearBtn {
        cursor: pointer;
        border-radius: 4px;
        margin-left: 10px;
        border: 1px solid rgb(217, 217, 217);
      }
    }
  }
}
</style>
